<!doctype html>
<html class="no-js fixed-layout">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <title>萌宠之家-C2B2C社会化电商平台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->

  <script src="statics/js/plugin/jquery.cookie.js"></script>

  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
  <script src="statics/js/plugin/jquery.form.js"></script>

  <script src="statics/js/jquery.lSelect.js"></script>
  <script src="statics/js/plugin/jquery.metadata.js"></script>
  <script src="statics/js/product.js"></script>
  <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
  <!-- sidebar start -->
  <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
  <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li><span class="am-icon-info-circle am-icon-fw"> </span>个人资料</li>
        <li class="am-active">个人信息</li>
      </ol>
      <form id="inputForm" class="validator-form" callback="inputFormAjaxSubmit()" action="http://localhost:8080/user/update" method="post">
      <div class="am-panel am-panel-default am-margin-horizontal-sm am-padding-top">
        <div class="am-panel-bd am-g am-padding-0 am-form am-form-horizontal">
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">用户名</label>
              <div class="am-u-sm-9">
                  <label class="am-form-label" id="username"></label>
              </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">真实姓名</label>
            <div class="am-u-sm-8 am-u-end">
              <input type="text" class="am-form-field" id="realname" name="realname" value="" placeholder="请输入真实姓名" />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">手机号码</label>
            <div class="am-u-sm-8 am-u-end">
                <input type="text" class="am-form-field js-pattern-mobile" id="phone" name="phone" value="" placeholder="请输入手机号码" required />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">E-mail</label>
            <div class="am-u-sm-8 am-u-end">
                <input type="email" class="am-form-field" id="email" name="email" value="" placeholder="请输入E-mail地址"  required>
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">性别</label>
            <div class="am-u-sm-8 am-u-end">
                <label class="am-radio-inline">
                    <input type="radio" name="gender" value="1"> 男
                </label>
                <label class="am-radio-inline">
                    <input type="radio" name="gender" value="0"> 女
                </label>
                <label class="am-radio-inline">
                    <input type="radio" name="gender" value="2" checked> 保密
                </label>
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">联系地址</label>
            <div class="am-u-sm-8 am-u-end">
                <input type="text" class="am-form-field" id="address" name="address" value="" placeholder="请输入联系地址" />
            </div>
          </div>
          <div class="am-form-group am-form-group-sm">
            <label class="am-u-sm-3 am-text-right am-form-label">邮编</label>
            <div class="am-u-sm-8 am-u-end">
                <input type="text" class="am-form-field js-pattern-zipCode" id="zipCode" name="zipCode" value="" placeholder="请输入邮编" />
            </div>
          </div>
          <hr data-am-widget="divider" class="am-divider am-divider-dashed" />
          <div class="am-form-group am-form-group-sm">
            <div class="am-u-sm-8 am-u-sm-offset-3">
              <input type="hidden" id="token" name="token" value="" />
              <button type="submit" class="am-btn am-btn-primary"><span class="am-icon-save"> 保 存</span></button>
            </div>
          </div>
        </div>
      </div>
      </form>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    let jsonUser;
    let token;

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }

        // 设置token
        $('#token').val(token);


        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');

        // 加载用户信息
        loadUser();

    });// $(function());

/** 加载'用户'数据 **/
function loadUser() {

    // 加载个人信息
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/user/get',
        async: false,
        data: { token: token },
        success: function (result) {

            // 如果返回的是token失效，就重新登录
            if (result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'login.html';
                    }
                });// Modal.confirm();

                return;
            }

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            let user = result.data;

            // 用户名
            $('#username').html(user.username);
            // 真实姓名
            $('#realname').val(user.realname);
            // 手机号码
            $('#phone').val(user.phone);
            // 电子邮箱
            $('#email').val(user.email);
            // 性别
            $("input:radio[name='gender'][value='" + user.gender + "']").attr('checked',true);
            // 联系地址
            $('#address').val(user.address);
            // 邮编
            $('#zipCode').val(user.zipCode);

        }// success(result);

    });// $.ajax();

}// loadUser();

    /** '登录表单' Ajax提交 **/
    function inputFormAjaxSubmit(){

        // '修改密码表单'提交
        $("#inputForm").ajaxSubmit({
            success:function(result){

                // 如果返回的是token失效，就重新登录
                if (result.code == 419) {

                    Modal.confirm('当前会话token失效，请重新登录页面！', {
                        closeViaDimmer: false,
                        onConfirm: function() {
                            top.location.href = 'login.html';
                        },
                        onCancel: function() {
                            top.location.href = 'login.html';
                        }
                    });// Modal.confirm();

                    return;
                }

                // 如果返回的数据的响应码不是'成功(200)'
                if (result.code != 200) {
                    Modal.alert(result.msg);
                    return;
                }

                // 如果返回的数据响应码为200
                // 将放回的用户信息存入到客户端session中
                sessionStorage.setItem( "user", JSON.stringify(result.data) );

                Modal.alert("个人信息修改成功!");

            }// success(result);
        });

    }// inputFormAjaxSubmit();

</script>
</html>
